<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import { CountTo } from "vue3-count-to";
import chinaMap from "../../assets/json/china.json";
import { getMapCoordinate } from "@/utils/api";

let chart = ref();
const chartData = ref([]); //地图的数据信息

onMounted(async () => {
  // let {
  //   data: { list },
  // } = await getMapCoordinate();
  // chartData.value = list;
  chartInit();
});

function chartInit() {
  let myChart = echarts.init(chart.value);
  //注册地图
  echarts.registerMap("china", chinaMap);
  let option = {
    geo: {
      type: "map",
      zoom: 1.2,
      map: "china",
      label: {
        show: true,
        color: "#fff",
        fontSize: 12,
      },
      itemStyle: {
        normal: {
          borderColor: "#00BCF9",
          borderWidth: 6,
          shadowColor: "#eee",
          opacity: 0.6,
          // areaColor:'#152F90',
          shadowBlur: 15, //边框阴影
        },
      },
    },
    series: [
      {
        type: "map",
        map: "china",
        zoom: 1.2, //缩放比例
        label: {
          show: true,
          color: "#fff",
          fontSize: 12,
        },
        itemStyle: {
          normal: {
            borderColor: "#00BCF9",
            borderWidth: 1,
            areaColor: "#152F90",
            shadowBlur: 3,
          },
        },
      },
      //散点
      {
        type: "scatter",
        coordinateSystem: "geo",
        data: [
          { name: "武汉", value: [114.31, 30.52] }, //武汉
          { name: "大庆", value: [125.03, 46.58] },
        ],
        //动态数据处理
        // data: chartData.value,
        itemStyle: {
          color: "#FFEA7A",
        },
        symbolSize: (val) => {
          return val[1] / 2;
        },
        label: {
          formatter: "{b}",
          position: "right",
          show: true,
          color: "#fff",
        },
      },
      //飞线
      {
        type: "lines",
        coordinateSystem: "geo",
        data: [
          [
            { coord: [113, 28.21] }, // 长沙
            { coord: [126.63, 45.75] }, //哈尔滨
          ],
        ],
        lineStyle: {
          normal: {
            color: "#00BCF9",
            curveness: 0.4,
          },
        },
        effect: {
          show: true,
          color: "#F0A623",
          period: 5, //速度
          symbol: "pin",
          symbolSize: 20,
          trailLength: 0.7,
        },
      },
      //发射点位置
      {
        type: "effectScatter",
        coordinateSystem: "geo",
        label: {
          formatter: "{b}",
          position: "right",
          show: true,
          color: "#fff",
        },
        rippleEffect: {
          brushType: "stroke",
          scale: 4,
        },
        itemStyle: {
          //颜色
          color: "#F0A623",
        },
        data: [
          {
            name: "长沙",
            value: [113, 28.21],
          },
          {
            name: "哈尔滨",
            value: [126.63, 45.75],
          },
        ],
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener("resize", () => {
    myChart.resize();
  });
}
</script>

<template>
  <div class="cen-top">
    <div class="map-num">
      <p>实时行驶车辆（辆）</p>
      <div class="num">
        <countTo :startVal="0" :endVal="240897" :duration="5000"></countTo>
        <!-- <counTo :startVal="0" :endVal="240897" :duration='3000'></counTo> -->
      </div>
    </div>
    <!-- 地图  -->
    <div ref="chart" style="width: 100%; height: 600px"></div>
  </div>
</template>

<style scoped></style>
